<template>
    <div class="roleManager">
        <el-row>
            <el-col :span="23" style="margin : 15px">
                <el-button @click="addRole">添加</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="23">
                <el-table :data="tableData" stripe border style="width: 100%" v-loading.body="loading">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="userName" label="姓名" width="120" ></el-table-column>
                <el-table-column  label="分配权限" >
                    <template slot-scope="scope">
                        <i v-for="item in scope.row.personList" :key="item.id">
                            <el-tag style="margin-left : 5px">{{item.userName}}</el-tag>
                        </i>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="openType(scope.row),typeData.check = []" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteRole(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog title="选择仪器类型" :visible.sync="typeData.typeShow" :modal-append-to-body="false" >
            <el-checkbox-group v-model="typeData.check">
                <el-checkbox-button v-for="type in typeData.dataList" :label="type" :key="type.id">{{type.instrumentType}}</el-checkbox-button>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="typeData.typeShow = false">取 消</el-button>
                <el-button type="primary" @click="openDialog(typeData.check), typeData.typeShow = false">打 开</el-button>
            </div>
        </el-dialog>

        <el-dialog title="管理权限分配" :visible.sync="roleData.roleShow" :modal-append-to-body="false" >
            <el-checkbox style="margin : 10px" :indeterminate="isIndeterminate" v-model="checkAll" @change="checkboxAll">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="roleData.check">
                <el-checkbox style="margin : 10px" v-for="person in roleData.dataList" :label="person.principalJob" :key="person.id" @change="checkboxOne">{{person.principal}}</el-checkbox>
            </el-checkbox-group>

            <div slot="footer" class="dialog-footer">
                <el-button @click="roleData.roleShow = false">取 消</el-button>
                <el-button type="primary" @click="checkPerson">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "roleManager",
    data() {
        return {
            typeData : { check : [] , dataList : [] ,typeShow : false },//仪器类型
            roleData : { check : [] , dataList : [] , roleShow : false , userId : ''}, //权限人员列表
            loading : true ,
            tableData: [] ,
            checkAll: false,
            isIndeterminate : false
        };
    },
    methods: {
        checkboxAll() {
            if(this.checkAll){
                let jobList = [];
                for (let i = 0; i < this.roleData.dataList.length; i++) {
                    let element = this.roleData.dataList[i];
                    jobList.push(element.principalJob);
                }
                this.roleData.check = jobList ;
                this.isIndeterminate = false ;
            }else{
                this.roleData.check = [];
            }
        },
        checkboxOne () {
            if(this.roleData.check.length > 0){
                this.isIndeterminate = true ;
            }else if(this.roleData.check.length == this.roleData.dataList.length){
                this.checkAll = true ;
                this.isIndeterminate = false ;
            }else{
                this.checkAll = false ;
                this.isIndeterminate = false ;
            }
        },
        openType : function (row) {//打开编辑 =》 查看类型
            this.roleData.userId = row.userId
            this.$http.post('api/role/getInstrumentTypeList').then( res => {
                let result = res.data ; 
                if(result.code == 100 ){
                    this.typeData.dataList = result.data ;
                    this.typeData.typeShow = true ;
                }
            })
        },
        deleteRole : function (row ) {
            this.$confirm("确认删除?", "提示", { confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(res => {
                this.loading = true ;
                this.$http.post('api/role/deleteRoleByUserId',{userId : row.userId}).then( res => {
                    let result = res.data ;
                    if(result.code == 100 ){
                        this.message("删除成功","success");
                        this.loading = false ;
                        this.initList();
                    }
                })
            });
        },
        addRole : function () {
            this.$ddapi.contactChoose([]).then(res => {//[ { "name": "龚杰", "avatar": null, "emplId": "05556651101293078" } ] emplId =>userId
                this.loading = true ;
                this.$http.post('api/role/createRolePerson',{userInfo : res[0]}).then( res => {
                    let result = res.data ;
                    if(result.code == 100 ){
                        this.message('添加成功','success');
                        this.loading = false ;
                        this.initList() ;
                    }
                    if(result.code == 101 ){
                        this.message('请勿重新添加','error');
                        this.loading = false ;
                    }
                })
            });
        },
        openDialog (typeList) {
            this.checkAll = false ;
            this.isIndeterminate = false ;
            if(typeList.length == 0){
                this.message('请选择至少一种仪器类型','error');
                return ;
            }
            this.roleData.check = [];
            this.$http.post('api/role/getPrincipalByTypeName',{typeList : typeList}).then( res => {
                let result = res.data ;
                if(result.code == 100 ){
                    console.log(result.data)
                    this.roleData.dataList = result.data ;
                    this.roleData.roleShow = true ;
                }
            })
        },
        checkPerson () {
            if(this.roleData.check.length == 0){
                this.message('请选择至少一个的负责人','error') ;
                return ;
            }
            this.roleData.roleShow = false ;
            this.loading = true ;
            this.$http.post('api/role/updateRoleDataByUserId',{ userId : this.roleData.userId  , array : this.roleData.check ,typeList : this.typeData.check }).then( res => {
                let result = res.data ;
                if(result.code == 100 ){
                    this.loading = false ;
                    this.initList();
                }
            })
        },
        initList : function () {
            this.$http.post('api/role/queryRoleList').then( res => {
                let result = res.data ;
                if(result.code == 100 ){
                    this.tableData = result.data ;
                    this.loading = false ;
                }
            })
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }

    },
    created: function() {
        this.initList();
    }
}
</script>
<style lang="css" scoped>

</style>